<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Team Page</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/cloud.css">
</head>

<body>
    <section class="change">
        <img src="images/bg.jpg" id="bg">
        <img src="images/moon.png" id="moon">
        <img src="images/mountain.png" id="mountain">
        <img src="images/road.png" id="road" road>
        <h2 id="text">
            Welcome
        </h2>

    </section>
    <!-- <div class="iframe-wrap">
        <iframe class="iframe" src="http://www.jq22.com/demo/jquery-cloud-141217202931" frameborder="0">
        </iframe>
        <p class="welcome">Welcome</p>
    </div> -->

    <div class="team-member owl-carousel" id="content">
        <div class="member">
            <img src="images/landscape1.jpg" alt="">
            <div class="member-description">
                <div class="position">
                    Member
                </div>
                <h2 class="title">Zihan Guo</h2>
                <div class="saying">Never say die.</div>
                <a href="https://chestnutbiu.gitee.io/my-homepage
                " class="btn" target="_blank">Explore Me</a>
            </div>
        </div>
        <div class="member">
            <img src="images/landscape6.jpg" alt="">
            <div class="member-description">
                <div class="position">
                    Member
                </div>
                <h2 class="title">Qihao Liang</h2>
                <div class="saying">Keep on going never give up.</div>
                <a href="https://alexliang123.gitee.io/homework10" class="btn"  target="_blank" >Explore Me</a>
            </div>
        </div>
        <div class="member">
            <img src="images/landscape3.jpg" alt="">
            <div class="member-description">
                <div class="position">
                    Member
                </div>
                <h2 class="title">Jiakang Liu</h2>
                <div class="saying">Hang on to your dreams.</div>
                <a href="http://me.kagurakana.xyz" target="_blank" class="btn">Explore Me</a>
            </div>
        </div>
        <div class="member">
            <img src="images/landscape2.jpg" alt="">
            <div class="member-description">
                <div class="position">
                    Member
                </div>
                <h2 class="title">Jin Peng</h2>
                <div class="saying">Life is not all roses.</div>
                <a href="https://pengjin999.gitee.io/pengjin1" class="btn"  target="_blank" >Explore Me</a>
            </div>
        </div>
        <div class="member">
            <img src="images/landscape5.jpg" alt="">
            <div class="member-description">
                <div class="position">
                    Leader
                </div>
                <h2 class="title">Zengzhi Wang</h2>
                <div class="saying">Talk is Always cheap!</div>
                <a href="https://sinclaircoder.gitee.io/h5-homepage" class="btn"  target="_blank" >Explore Me</a>
            </div>
        </div>
    </div>
    <!-- <div class="iframe-wrap">
        <iframe class="iframe" src="http://www.jq22.com/demo/jquery-cloud-141217202931" frameborder="0">
        </iframe>
    </div> -->
    <script>
        let bg = document.querySelector('#bg')
        let moon = document.querySelector('#moon')
        let mountain = document.querySelector('#mountain')
        let road = document.querySelector('#road')
        let text = document.querySelector('#text')

        window.addEventListener('scroll', () => {
            var value = window.scrollY;

            bg.style.top = value * 0.5 + 'px';
            moon.style.left = -value * 0.5 + 'px';
            mountain.style.top = -value * 0.15 + 'px';
            road.style.top = value * 0.15 + 'px';

            text.style.top = value * 1 + 'px';


        })


        $(".owl-carousel").owlCarousel({
            margin: 20,
            loop: true,
            center: true,
            dots: true,
            items: 3,
            autoplay: true,
            autoplayTimeout: 1000,
            autoplayHoverPause: true,
        })
    </script>

</body>

</html>